<template>
	<view class="login-page" :style="{height:$systemInfo.windowHeight+'px'}">
		<swiper class="login-swiper" @change="onSwiperChange">
			<swiper-item class="swiper-item-0">
				<image class="logo" src="/static/logo.png" mode="widthFix"></image>
				<image class="img" src="/static/login/0.jpg" mode="aspectFill" :style="{height:$systemInfo.windowHeight+'px'}"></image>
			</swiper-item>
			<swiper-item class="swiper-item">
				<image class="screen-img" src="/static/login/screen-1.png" mode="widthFix"></image>
				<view class="h2 web-font-thin">美妙的声音</view>
				<text class="p web-font-thin">
					真正干净易用的界面
					放松下来，听你最喜欢的心灵之“歌”
				</text>
			</swiper-item>
			<swiper-item class="swiper-item">
				<image class="screen-img" src="/static/login/screen-2.png" mode="widthFix"></image>
				<view class="h2 web-font-thin">社交化</view>
				<text class="p web-font-thin">
					与朋友保持联系并分享你的天籁之音
					或者谈论最新的音乐
				</text>
			</swiper-item>
		</swiper>
		<view class="footer">
			<view class="current-wraper">
				<view class="dot" :data-active="current===0"></view>
				<view class="dot" :data-active="current===1"></view>
				<view class="dot" :data-active="current===2"></view>
			</view>
			<view class="login-wrap">
				<view class="btn"><button class="qq iconfont">&#xe671;</button></view>
				<view class="btn"><button class="wechat iconfont">&#xe67c;</button></view>
			</view>
			<view class="copyright web-font-thin">2019©晓月有声读物/音乐</view>
		</view>
	</view>
</template>

<script>
	export default {
		mounted() {
		},
		data() {
			return {
				current: 0
			}
		},
		methods: {
			onSwiperChange(e){
				this.current = e.target.current
			}
		}
	}
</script>

<style lang="scss">
.login-page{
	display: flex;
	flex-direction: column;
	.current-wraper{
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40upx 0;
		.dot{
			width: 10upx;
			height: 10upx;
			border-radius: 50%;
			background: rgba(255,255,255,0.5);
			margin: 0 8upx;
			&[data-active="true"]{
				background: #fff;
				border: solid 2px #00aeef;
			}
		}
	}
}
.login-swiper{
	flex: 1 0 auto;
	swiper-item{
		overflow: visible;
		position: relative;
	}
	.swiper-item{
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		justify-content: center;
		.screen-img{
			width: 280upx;
			margin-bottom: 40upx;
		}
		.h2, .p{
			width: 100%;
			text-align: center;
		}
		.h2{
			font-size: 58upx;
			margin: 1em 0 .8em;
		}
		.p{
			line-height: 2em;
			font-size: 24upx;
			letter-spacing: 2upx;
			opacity: .75;
		}
	}
	.swiper-item-0{
		.img{
			width: 100%;
			height: 100%;
		}
		.logo{
			position: absolute;
			width: 260upx;
			left: 50%;
			top: 50%;
			margin-left: -130upx;
			margin-top: -130upx;
			z-index: 99;
			height: auto;
		}
	}
}
.login-wrap{
	border-top: solid 1upx rgba(255,255,255,.15);
	display: flex;
	justify-content: center;
	padding: 20upx;
	.btn{
		flex: 1;
		padding: 20upx;
	}
	button{
		height: 100upx;
		width: 100%;
		color: #fff;
		line-height: 100upx;
	}
	.qq{
		background: #4b8eff;
	}
	.wechat{
		background: #13b5b1;
	}
}
.footer{
	flex: 0 0 auto;
	position: relative;
	image{
		position: absolute;
		z-index: 1;
		width: 100%;
		left: 0;
		top: 0;
	}
}
.copyright{
	font-size: 20upx;
	text-align: center;
	padding-bottom: 40upx;
	opacity: 0.5;
}
</style>
